<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { RouterView, useRouter } from "vue-router";
import { NConfigProvider, NGlobalStyle } from "naive-ui";
import { lightTheme, darkTheme } from "naive-ui";
import { zhCN, dateZhCN } from "naive-ui";
import { useThemeStore } from "@/stores/theme";

const router = useRouter();
const themeStore = useThemeStore();

watch(router.currentRoute, () => {
  document.title = (router.currentRoute.value.meta.title as string) || "Marco";
});

const theme = computed(() => {
  return themeStore.isDark ? darkTheme : lightTheme;
});

const themeOverrides = ref({
  common: {
    primaryColor: "#722ED1", // Purple as the primary color
    primaryColorHover: "#5E25B0", // Darker purple for hover state
    primaryColorPressed: "#4A1C8F", // Even darker purple for pressed state
    primaryColorSuppl: "#722ED1", // Purple for supplementary elements
  },
  Button: {
    colorPrimary: "#722ED1", // Purple for primary buttons
    colorPrimaryHover: "#5E25B0", // Darker purple for hover state
    colorPrimaryPressed: "#4A1C8F", // Even darker purple for pressed state
    colorPrimarySuppl: "#722ED1", // Purple for supplementary buttons
  },
  Input: {
    colorPrimary: "#722ED1", // Purple for input borders
    colorPrimaryHover: "#5E25B0", // Darker purple for hover state
    colorPrimaryPressed: "#4A1C8F", // Even darker purple for pressed state
    colorPrimarySuppl: "#722ED1", // Purple for supplementary input elements
  },
});
</script>

<template>
  <NConfigProvider
    :theme="theme"
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme-overrides="themeOverrides"
  >
    <NGlobalStyle />
    <RouterView />
  </NConfigProvider>
</template>
